import React, { useState, lazy, Suspense } from "react";

// 这个import叫做import命令，import命令是同步引入的
// import Child from "./Child";

// es6还新增了import函数，import函数可以用来做异步引入
const Child = lazy(() => import("./Child"));

const App = () => {
  const [show, setShow] = useState(false);

  const fn = () => {
    setShow(true);
  };

  return (
    <>
      <h2>组件的懒加载</h2>
      <button onClick={fn}>btn</button>
      {/* Suspense用于在加载过程中显示内容用的 */}
      <Suspense fallback={<div>loading...</div>}>{show && <Child />}</Suspense>
    </>
  );
};

export default App;
